<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>消息列表</span>
          <div class="header-right">
            <el-button type="primary" link @click="markAllRead">全部标记为已读</el-button>
            <el-button type="danger" link @click="clearAll">清空消息</el-button>
          </div>
        </div>
      </template>

      <el-tabs v-model="activeTab">
        <el-tab-pane label="未读消息" name="unread">
          <message-list :messages="unreadMessages" @update="loadMessages" />
        </el-tab-pane>
        <el-tab-pane label="已读消息" name="read">
          <message-list :messages="readMessages" @update="loadMessages" />
        </el-tab-pane>
      </el-tabs>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import MessageList from './components/MessageList.vue'
import { getMessageList, markAllMessagesRead, clearAllMessages } from '@/api/system/message'
import { ElMessage, ElMessageBox } from 'element-plus'

const activeTab = ref('unread')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const unreadMessages = ref([])
const readMessages = ref([])

// 标记全部已读
const markAllRead = async () => {
  try {
    await markAllMessagesRead()
    ElMessage.success('已将所有消息标记为已读')
    await loadMessages()
  } catch (error) {
    console.error('标记全部已读失败:', error)
  }
}

// 清空消息
const clearAll = async () => {
  try {
    await ElMessageBox.confirm('确认要清空所有消息吗？', '提示', {
      type: 'warning'
    })
    await clearAllMessages()
    ElMessage.success('已清空所有消息')
    await loadMessages()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('清空消息失败:', error)
    }
  }
}

// 加载消息列表
const loadMessages = async () => {
  try {
    const params = {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      messageStatus: activeTab.value === 'read' ? 1 : 0
    }
    const { rows, total: totalCount } = await getMessageList(params)
    if (activeTab.value === 'read') {
      readMessages.value = rows
    } else {
      unreadMessages.value = rows
    }
    total.value = totalCount
  } catch (error) {
    console.error('加载消息列表失败:', error)
  }
}

// 分页相关方法
const handleSizeChange = (val: number) => {
  pageSize.value = val
  loadMessages()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  loadMessages()
}

// 监听标签页切换
watch(activeTab, () => {
  currentPage.value = 1
  loadMessages()
})

// 初始化加载
onMounted(() => {
  loadMessages()
})
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-right {
  display: flex;
  gap: 16px;
}
</style>@/api/system/message